 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:o="http://openfaces.org/"
      xmlns:c="http://java.sun.com/jstl/core">
		  
    <head>
    </head>
    <body>
        <ui:composition template="/templates/default.xhtml">
			<ui:define name="title">OpenHDS - Edit Membership</ui:define>
		
			<ui:param name="crud" value="#{membershipCrud}" />
			
            <ui:define name="listing">
                <ui:include src="list.xhtml" />
            </ui:define>
            <ui:define name="display">
            
        <h:outputText value="#{navController.breadcrumbTrail}" />
            
        <h1><h:outputText value="#{msg.membershipEdit}" /></h1>
         <h:messages id="errors" globalOnly="true" />
        <h:form id="form">
  				
                    <h:panelGrid columns="4">

            		<h:outputText value="#{msg.individualId}:"/>
            		<h:outputText />
                	<h:inputText styleClass="individual" autocomplete="off" id="indiv" value="#{membershipCrud.item.individual}" converter="#{individualExtIdConverter}" disabled="true" />
            		<h:message for="indiv" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

            		<h:outputText value="#{msg.socialGroupId}:"/>
            		<h:outputText />
                	<h:inputText styleClass="socialGroup" autocomplete="off" id="socialGrp" value="#{membershipCrud.item.socialGroup}" converter="#{socialGroupExtIdConverter}" />
            		<h:message for="socialGrp" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

			        <h:outputText value="#{msg.membershipRelationToHead}:"/>
			        <img class="clickable" onclick="O$('popupWindowForRelationship').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
					<h:inputText id="relationshipType1" value="#{membershipCrud.item.bIsToA}" converter="#{membershipCodesConverter}" />
			        <h:message for="relationshipType1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                   <h:outputText value="#{msg.membershipStartDate} (#{siteProperties.dateFormat})" />
                   <h:outputText />
                   <o:dateChooser id="startDate" value="#{membershipCrud.startDate}" pattern="#{siteProperties.dateFormat}" /> 
                   <h:message for="startDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
	
			       <h:outputText value="#{msg.membershipType}:"/>
			       <img class="clickable" onclick="O$('popupWindowForMembershipStartType').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
				   <h:inputText id="membershipType1" value="#{membershipCrud.item.startType}" converter="#{membershipStartTypeCodesConverter}" />
			       <h:message for="membershipType1" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
					
				   <h:outputText value="#{msg.membershipEndDate} (#{siteProperties.dateFormat})" />
				   <h:outputText />
                   <o:dateChooser id="endDate" value="#{membershipCrud.endDate}" pattern="#{siteProperties.dateFormat}"  /> 
                   <h:message for="endDate" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

				   <h:outputText value="#{msg.membershipEndType}:"/>
		           <img class="clickable" onclick="O$('popupWindowForMembershipEndType').showCentered();" src="#{request.contextPath}/resources/images/question.png" />
				   <h:inputText id="membershipEndType" value="#{membershipCrud.item.endType}" converter="#{membershipEndTypeCodesConverter}" />
		           <h:message for="membershipEndType" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                   <h:outputText value="#{msg.fieldWorkerId}:"/>
                   <h:outputText />
                   <h:inputText styleClass="collectedBy" autocomplete="off" id="collectedBy" value="#{membershipCrud.item.collectedBy}" converter="#{fieldWorkerExtIdConverter}" />
                   <h:message for="collectedBy" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>

                    </h:panelGrid>
                    <script>
  						document.getElementById('form:startDate').focus();
  					</script>

			<br />

 		    <h:commandButton action="#{membershipCrud.edit}" value="#{msg.lblSave}">
	        	<f:setPropertyActionListener target="#{jsfService.itemId}" value="#{membershipCrud.item.uuid}" />
	        </h:commandButton>
           <h:outputText value=" " />
			<h:commandButton value="#{msg.lblCancel}" rendered="#{flowScope != null}" immediate="true" action="cancel" />
        </h:form>  
        </ui:define>
        </ui:composition>
    </body>
</html>
